<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        (function(e, t) {
            function n(e) {
                var n = i.getBoundingClientRect().width,
                    s = n / a * 100;
                d && (s = Math.min(s, 100)), i.style.fontSize = s + "px", t.layout.rootFontSize = s, p && window.devicePixelRatio > 1 && n < 400 && (l.dpr = 1), i.setAttribute("data-dpr", l.dpr);
                if (e) {
                    var o = f * l.dpr,
                        u = a / 100,
                        c = "body {font-size:" + o + "px !important;}";
                    if (d) {
                        var u = a / 100;
                        c += "body {margin-left:auto !important;margin-right:auto !important;max-width:" + u + "rem;}"
                    }
                    var h = [];
                    for (var v = 10; v <= 40; v++) h.push(".f" + v + "{font-size:" + l.dpr * v + "px !important;}");
                    var m = [c, h.join("")].join("\n");
                    r.write('<style type="text/css">' + m + "</style>")
                }
            }
            var r = e.document,
                i = r.documentElement,
                s = r.querySelector('meta[name="viewport"]'),
                o = r.querySelector('meta[name="layout"]'),
                u = e.devicePixelRatio || 1,
                a = 720,
                f = 12,
                l = t.layout || (t.layout = {}),
                c = e.navigator.userAgent,
                h = /(iPhone|ipod|ipad|ios)/i.test(c),
                p = e.navigator.appVersion.match(/android/ig),
                d = !h && !p,
                v = !1,
                m, g, y;
            o && (y = o.getAttribute("content") || "") && (y.match(/width=(\d+)/i), RegExp.$1 && (a = RegExp.$1), y.match(/font-size=(\d+)/i), RegExp.$1 && (f = RegExp.$1), y.match(/dpr(?:=(\d+))?/i) && (v = RegExp.$1 || 1)), u >= 3 ? u = 3 : u >= 2 ? u = 2 : u > 1 && (u = 1), v && (u = v), g = 1 / u, l.dpr = u;
            if (!s) {
                var b = ["initial", "maximum", "minimum", "user-scalable=no"].join("-scale=" + g + ","),
                    w = '<meta name="viewport" content="width=device-width,' + b + '">';
                r.write(w)
            }
            e.addEventListener("resize", function() {
                clearTimeout(m), m = setTimeout(n, 300)
            }, !1), e.addEventListener("pageshow", function(e) {
                e.persisted && (clearTimeout(m), m = setTimeout(n, 300))
            }, !1), n(!0), t.layout.px2rem = function(e) {
                return e / this.rootFontSize
            }, t.layout.rem2px = function(e) {
                return e * this.rootFontSize
            }, t.layout.fontSize = function(e) {
                return e * this.dpr
            }, t.layout.setupRem = n
        })(window, window.lib || (window.lib = {}))
    </script>
    <style>

        .item {
            float: left;
            width: 1.6rem;
            padding: 10px;
            overflow: hidden;
        }
        
        .item img {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }
        
        .item p {
            text-align: center;
            line-height: 1.2;
        }
        
        .els {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
    <div class="taken"></div>
<body>

    <script src="./data.js">
    </script>
    <script src="./zp.js">
    </script>
    <script>
        function createDom(obj) {
            var con = $("<div class='item'>");
            var img = $('<img >');
            img.attr("src", "http://p9.yx-s.com/d/inn/0e37f945/app_logo.png");
            img.data("real_src", obj.logo_url);
            var p1 = $("<p class='f14 els'>");
            p1.text(obj.name);
            var p2 = $("<p class='f13 els'>");
            p2.text(obj.single_word);
            con.append(img);
            con.append(p1);
            con.append(p2);
            $("body").append(con);
        }
        for (let i of data) {
            let obj = {
                logo_url: i.logo_url,
                name: i.name,
                single_word: i.single_word
            };
            //console.log(obj);
            createDom(obj);
        }
    </script>
    <script>
        var io = new IntersectionObserver(function(items) {
            items.forEach(function(item) {
                //console.log(item);
                var target=item.target;
                target.src=$(target).data("real_src");
                io.unobserve(target); 
            })
        });

        function query(selector) {
            return Array.from(document.querySelectorAll(selector));
        }
        query('.item img').forEach(function(item) {
            io.observe(item);
        });
    </script>
</body>

</html>